<template>
  <div class="content-wrapper" :class="{'collapse-content': collapse}">
    <p class="content-title">{{title}}</p>
    <div class="content-view">
      <router-view />
    </div>
    <footer class="content-footer">
      <p>Copyright © 2019-2022 社小龙 All rights reserved.</p>
      <p>Version 1.0.0</p>
    </footer>
  </div>
</template>

<script>
import bus from "./bus";
export default {
  data() {
    return {
      collapse: false
    };
  },
  computed: {
    title() {
      return this.$route.name
    }
  },
  created() {
    // console.log(this.$route)
    bus.$on("collapse", collapse => {
      this.collapse = collapse;
    });
  }
};
</script>

<style lang="less">
.content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 70px;
  left: 250px;
  right: 0;
  bottom: 0;
  background-color: #F0F1F5;
  transition: left 0.3s ease-in-out;
  .content-title {
    padding: 10px;
    font-size: 24px;
  }
  .content-view {
    padding: 10px;
    flex: 1;
    overflow-y: auto;
  }
  .content-footer {
    padding: 10px;
    display:flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
  }
}
.collapse-content {
  left: 64px;
}
</style>